<template>
	<view class="list">
		<block v-if="sid==3">
			<view class="menu acea-row row-middle">
				<block v-for="(item,index) in catery" :key="index">
					<view class="mitem" :class="cid == item.cid?'on':''" @click="menuClick(item.cid)">
						{{ item.title }}
					</view>
				</block>
			</view>
			<view style="width: 100%;height: 108rpx;"></view>
		</block>
		
		<block v-for="(item,index) in list" :key="index">
			<view class="item acea-row row-between" :style="{'backgroundImage': `url(${item.image})`}"
			@click="urlClick(`/pages/reservation/reser-detail?id=${item.id}`)">
				<!-- <view class="text">
					<view class="title bold">{{ item.title }}</view>
					<view class="btn">查看详情</view>
				</view>
				<view>
					<image class="icon3" :src="item.image" mode="aspectFit"></image>
				</view> -->
			</view>
		</block>
		<block v-if="list.length==0">
			<view class="kong">
				<view class="acea-row row-middle row-center none-t">
					<text class="fs-32 color666">暂无更多数据~</text>
				</view>
			</view>
		</block>

		
<!-- 		<view class="item acea-row row-between" @click="urlClick(``)">
			<view class="text">
				<view class="title bold">适老化改造套餐</view>
				<view class="btn">查看详情</view>
			</view>
			<view>
				<image class="icon3" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/reser01%20(1).png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="item acea-row row-between" @click="urlClick(``)">
			<view class="text">
				<view class="title bold">养老服务套餐</view>
				<view class="btn">查看详情</view>
			</view>
			<view>
				<image class="icon2" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/reser01%20(2).png" mode="aspectFit"></image>
			</view>
		</view> -->
		
	</view> 
</template>
<script>
	import{
		taocanList,
		taocanCategory
	} from '@/api/admin.js'
	export default {
		data() {
			return {
				page:1,
				limit:10,
				list:[],
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				cid:0,
				sid:0,
				catery:[],
				
			};
		},
		onLoad(option) {
			let title = '个人养老套餐' , cid = option.cid;
			this.cid = cid || 0;
			this.sid = cid || 0;
			if( cid == 2 ){
				title = '个人养老套餐'
			} 
			if( cid == 3 ) {
				title = '企业定制套餐'
				this.getcateoy();
			}
			uni.setNavigationBarTitle({
				title: title
			});
			
		},
		onShow() {
			this.empty();
			this.getlist();
		},
		methods:{
			empty(){
				this.page = 1;
				this.list = [];
				this.loadend = false;
				this.loading = false;
			},
			menuClick(cid){
				this.cid = cid;
				this.empty();
				this.getlist();
			},
			getcateoy(){
				taocanCategory({ pid:1 }).then(res=>{
					this.catery = res.data.data;
				})
			},
			getlist(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				taocanList({ page:that.page,limit:that.limit,cid:that.cid }).then(res=>{
					let list = res.data.data;
					let arr = that.$util.SplitArray(list, that.list);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'list', arr);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss">
	.list{
		padding: 30rpx;
		
		.menu{
			width: 100%;
			height: 104rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			padding: 0 40rpx;
			
			.mitem{
				font-size: 30rpx;
				margin-right: 70rpx;
				line-height: 70rpx;
				
				&.on{
					color: #FD7D36;
					border-bottom: 4rpx solid #FD7D36;
				}
			}
			
		}
		
		.item{
			width: 690rpx;
			height: 258rpx;
			border-radius: 60rpx;
			background-color: #ffffff;
			margin-bottom: 30rpx;
			overflow: hidden;
			position: relative;
			background-size: 100% 100%;
			
			.text{
				padding: 50rpx 0 0 50rpx;
				
				.title{
					font-size: 48rpx;
					color: #333333;
				}
				.btn{
					width: 216rpx;
					height: 72rpx;
					border-radius: 58rpx;
					color: #FD7D36;
					background: rgba(253, 125, 54, 0.2);
					line-height: 72rpx;
					text-align: center;
					font-size: 32rpx;
					margin-top: 20rpx;
				}
			}
			.icon3{
				width: 310rpx;
				height: 232rpx;
				position: absolute;
				bottom: -20rpx;
				right: 0;
			}
			.icon2{
				width: 374rpx;
				height: 232rpx;
				position: absolute;
				bottom: -20rpx;
				right: -15rpx;
			}
			
		}
		
		.kong{
			width: 520rpx;
			height: 520rpx;
			background-image: url('https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/none-icon.png');
			background-size: 100% 100%;
			margin: 30rpx auto;
			position: relative;
			
			.none-t{
				width: 100%;
				color: #888888;
				font-size: 34rpx;
				position: absolute;
				bottom: -20rpx;
				left: 0;
				right: 0;
			}
		}
		
		
	}
</style>
